<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import user from '../api/user.js'
import tool from '@/util/root.js'

const manVisible = ref(false)
const userInfo = ref({

});
onMounted(() => {
    // getUserDetail(1)
    getTokenUser()
})
const manInfo = () => {
    manVisible.value = true;
    // getUserDetail(id)
}
const getUserDetail = (id: Long) => {
    user.getUserDetail(id).then((re) => {
        userInfo.value = re.data
    })
}
const getTokenUser = () =>{
    user.getTokenUser().then(re =>{
        userInfo.value = re.data
    })
}
const userClose = () => {
    // manVisible.value = false;

}
const outLogin =()=>{
    tool.out.outLogin()
     window.location.reload()
}
</script>
<template>
    <div>
        <div style="float: right; padding: 10px;">
            <el-avatar fit="contain">
                <template #default>
                    <el-image :src="userInfo.avatar"
                    fit="contain"
                        :preview-src-list="[userInfo.avatar]" />
                </template>
            </el-avatar>
            <el-dropdown style="margin: 10px;">
                <span class="el-dropdown-link">
                    {{ userInfo.name }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="manInfo(1)">个人信息</el-dropdown-item>
                        <el-dropdown-item>Action 2</el-dropdown-item>
                        <el-dropdown-item>Action 3</el-dropdown-item>
                        <el-dropdown-item disabled>Action 4</el-dropdown-item>
                        <el-dropdown-item @click="outLogin()">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <el-dialog v-model="manVisible" title="个人信息" width="800" @close="userClose()">
            <el-card style="max-width: 800px">
                <el-descriptions title="基础信息" border>
                    <el-descriptions-item :rowspan="2" :width="140" label="头像" align="center">
                        <el-image style="width: 100px; height: 100px" :src="userInfo.avatar"
                            :preview-src-list="[userInfo.avatar]" />
                    </el-descriptions-item>
                    <el-descriptions-item label="名称">{{ userInfo.name }}</el-descriptions-item>
                    <el-descriptions-item label="手机号">{{ userInfo.phone }}</el-descriptions-item>
                    <el-descriptions-item label="年龄">{{ userInfo.age }}</el-descriptions-item>
                    <el-descriptions-item label="邮件">
                        <el-tag size="small">{{ userInfo.email }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="详细描述">
                        No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
                    </el-descriptions-item>
                </el-descriptions>

                <!-- <el-descriptions title="Width vertical list" direction="vertical" border style="margin-top: 20px">
                    <el-descriptions-item :rowspan="2" :width="140" label="Photo" align="center">
                        <el-image style="width: 100px; height: 100px"
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    </el-descriptions-item>
                    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
                    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
                    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
                    <el-descriptions-item label="Remarks">
                        <el-tag size="small">School</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="Address">
                        No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
                    </el-descriptions-item>
                </el-descriptions> -->
            </el-card>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="manVisible = false">关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>